@import '../../style/themes';

.x-image {
  position: relative;
  display: inline-flex;
  vertical-align: middle; // 解决 img 留白

  &_img {
    width: 100%;
    height: 100%;
    min-width: inherit;
    min-height: inherit;
    line-height: 0;
  }

  &_placeholder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: $menu-bg;
    color: $text-color;
  }

  &_error {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-width: inherit;
    min-height: inherit;
    background: $menu-bg;
    color: $text-color;
  }
}
